import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Table, Button, Divider, Form, Input, Popconfirm } from 'antd';
import { delBus } from 'Services/hu.js';
import { get } from 'lodash';

const STORE_NAME = 'busManageBus';
const FormItem = Form.Item;

@connect(state => ({
  [STORE_NAME]: state[STORE_NAME],
  loading: state.loading.effects[`${STORE_NAME}/fetchTableDataSource`],
}))
@Form.create()
class publicServerMessage extends Component {
  constructor(props) {
    super(props);
    window.scope = this;
  }

  componentDidMount() {
    this.fetchData();
  }

  getDataFromStore = key => (key ? this.props[STORE_NAME][key] : this.props[STORE_NAME]);

  fetchData = () => {
    const { dispatch } = this.props;
    dispatch({
      type: `${STORE_NAME}/fetchTableDataSource`,
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, value) => {
      this.props.dispatch({
        type: `${STORE_NAME}/updateFilterParams`,
        payload: value,
      });
    });
  };

  handleToDetail = (type, id) => {
    const { push } = this.props.history;
    let url = `/publicTransport/busDetail/${type}`;
    if (type !== 'add') url += `?id=${id}`;
    push(url);
  };

  handlePaginationChange = (pageNo, pageSize) => {
    const { dispatch } = this.props;
    dispatch({
      type: `${STORE_NAME}/updatePagination`,
      payload: { pageNo, pageSize },
    });
  };

  columns = [
    {
      title: '序号',
      width: '64px',
      key: 'index',
      dataIndex: 'index',
    },
    {
      title: '车牌号',
      key: 'num',
      dataIndex: 'num',
    },
    {
      title: '车辆型号',
      key: 'model',
      dataIndex: 'model',
    },
    {
      title: '车辆类型',
      key: 'type',
      dataIndex: 'type',
    },
    {
      title: '提车日期',
      key: 'createTime',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      key: 'gener',
      width: '240px',
      render: ({ id, num }) => (
        <span>
          <a onClick={this.handleToDetail.bind(this, 'view', id)}>查看</a>
          <Divider type="vertical" />
          <a onClick={this.handleToDetail.bind(this, 'edit', id)}>编辑</a>
          <Divider type="vertical" />
          <Popconfirm
            title="你确定要删除吗？"
            onConfirm={() => {
              delBus({ id }).then(this.fetchData);
            }}
          >
            <a>删除</a>
          </Popconfirm>
          <Divider type="vertical" />
          <a
            onClick={() => {
              const { push } = this.props.history;
              this.props.dispatch({
                type: 'busManageExamine/updateFilterParams',
                payload: { num },
              });
              push('/publicTransport/examine');
            }}
          >
            检查记录
          </a>
        </span>
      ),
    },
  ];

  pagination = () => ({
    current: +this.getDataFromStore('pageNo'),
    pageSize: +this.getDataFromStore('pageSize'),
    total: +this.getDataFromStore('total'),
    showQuickJumper: true,
    showSizeChanger: true,
    onChange: this.handlePaginationChange,
    onShowSizeChange: this.handlePaginationChange,
  });

  render() {
    const { columns, pagination } = this;
    const { tableDataSource: dataSource, filterParams } = this.getDataFromStore();
    const { getFieldDecorator } = this.props.form;

    return (
      <div>
        <Card
          title="车辆管理"
          extra={
            <Button type="primary" onClick={this.handleToDetail.bind(this, 'add', false)}>
              新增车辆
            </Button>
          }
        >
          <Form onSubmit={this.handleSubmit} layout="inline" style={{ margin: '0 12px 12px' }}>
            <FormItem label="车牌号">
              {getFieldDecorator('num', {
                initialValue: get(filterParams, 'num', ''),
              })(<Input placeholder="请输入车牌号查询" />)}
            </FormItem>
          </Form>
          <Table
            bordered
            loading={this.props.loading}
            columns={columns}
            dataSource={dataSource}
            pagination={pagination()}
          />
        </Card>
      </div>
    );
  }
}

export default publicServerMessage;
